<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">

<head>

    <title>数据展示 </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="zh-CN" />
    <link type="text/css" rel="stylesheet" href="../css/common.css" />
    <link type="text/css" rel="stylesheet" href="../css/index.css" />
     <link type="text/css" rel="stylesheet" href="../css/swiper-4.3.3.min.css" />
    <script type="text/javascript" src="../js/jquery.1.9.1.min.js"></script>
    <script type="text/javascript" src="../js/echarts.min.js"></script>
    <script type="text/javascript" src="../js/echarts-gl.min.js"></script>
    <script type="text/javascript" src="../js/swiper-4.3.3.min.js"></script>
</head>

<body class="" style="background:url(../images/bg.png) no-repeat;background-size:cover;-moz-background-size:cover;">
    <!--头部-->
    <div class="tile">
        <div class="caption-title clearfix">
            <!--<i class="title-left">-->
            <img src="../images/left-logo.png" />
           <!-- </i>-->
            <!--<p class="title-left-title-font">建设工程地下水智能监控系统</p>-->
            <img src="../images/title.png" style="width: 30%;padding: 0 27px;"/>
            <!--<i class="title-left">-->
            <img src="../images/right-logo.png" />
           <!-- </i>-->
        </div>
    </div>
    <!--主体-->
    <div class="content">
        <div class="main-left">
            <div class="left-content">
               <ul class="left-content-ul">
                    <li style="margin-top: 55px;">系统说明</li>
                    <li>工程概况</li>
                    <li>地下水监测</li>
                    <li>运行管理</li>
                    <li>风险控制</li>
                    <li>安全生产</li>
                </ul>
            </div>
        </div>
        <div class="right">
                <div class="right-content-title">气象监控</div>
            <div class="right-content">
               
                <ul class="right-content-ul">
                    <li>
                        <div class="right-li-img"><img src="../images/tmp/temperature.png"></div>
                        <div class="right-li-title">温度:</div>
                        <div class="right-data">31℃</div>
                    </li>
                    <li>
                        <div class="right-li-img"><img src="../images/tmp/humidity.png"></div>
                        <div class="right-li-title">湿度:</div>
                        <div class="right-data">65%RH</div>
                    </li>
                    <li>
                        <div class="right-li-img"><img src="../images/tmp/wind_ direction.png"></div>
                        <div class="right-li-title">风向:</div>
                        <div class="right-data">北偏东</div>
                    </li>
                    <li>
                        <div class="right-li-img"><img src="../images/tmp/wind_speed.png"></div>
                        <div class="right-li-title">风速:</div>
                        <div class="right-data">三级</div>
                    </li>
                    <li>
                        <div class="right-li-img"><img src="../images/tmp/noise.png"></div>    
                        <div class="right-li-title">噪音:</div>
                        <div class="right-data">20dB</div>
                    </li>
                    <li>
                        <div class="right-li-img"><img src="../images/tmp/pressure.png"></div>
                        <div class="right-li-title">气压:</div>
                        <div class="right-data">1mba</div>
                    </li>
                    <li>
                        <div class="right-li-img"><img src="../images/tmp/pm25.png"></div> 
                        <div class="right-li-title">pm2.5:</div>
                        <div class="right-data" style="font-size: 20px">31ug/m³</div>
                    </li>
                    <li>
                        <div class="right-li-img"><img src="../images/tmp/pm10.png"></div>
                        <div class="right-li-title">pm 10:</div>
                        <div class="right-data" style="font-size: 20px">31ug/m³</div>
                    </li>
                </ul>
               
            </div>
            <div class="right-content-tmp"></div>
        </div>
		<div class="main">
        	            <!--基坑环境图-->
            <div class="data-jk">
                    <div class="main-data-title">
                        基坑周边环境简图
                    </div>
                    <div id="data-jk" style="margin-left:20px;margin-right:20px;margin-top:10px;">
                        <img src="../images/tmp/jk.png" width="100%" height="250px" />
                    </div>
                </div>
                <!--水文地质图-->
               <div class="data-sw">
                    <div class="main-data-title">
                        水文地质剖面图
                    </div>
                    <div id="data-sw" style="margin-left:20px;margin-right:20px;margin-top:10px;">
                        <img src="../images/tmp/sw.png" width="100%" height="250px" />
                    </div>
                </div>
            <!--水位监测图-->
            <div class="data-swjk">
                <div class="main-data-title">
                    水位波形图
                </div>
                <div id="data-swjk" class="chart-data">

                </div>
            </div>
            <!--3d数据变换-->
            <div class="data-3d">
                <div class="main-data-title">
                    水位3D图
                </div>
                <div id="data-3d" class="chart-data">

                </div>
            </div>


        	 <!--水井数据-->
 	<div class="data-sj">
 		<div class="swiper-container">
        <ul class="swiper-wrapper data-sj-ul">
        	<div class="swiper-slide">
        		<li>
                <div class="data-sj-content">
                	<div class="data-sj-content-head">1#水位</div>
                	<div class="data-sj-content-cycle-num"><em>6.714</em>m</div>
                </div>
            </li>
        	</div>
            
           <div class="swiper-slide">
        		<li>
                <div class="data-sj-content">
                	<div class="data-sj-content-head">2#水位</div>
                	<div class="data-sj-content-cycle-num"><em>6.714</em>m</div>
                </div>
            </li>
        	</div>
           <div class="swiper-slide">
        		<li>
                <div class="data-sj-content">
                	<div class="data-sj-content-head">3#水位</div>
                	<div class="data-sj-content-cycle-num"><em>6.714</em>m</div>
                </div>
            </li>
        	</div>
           <div class="swiper-slide">
        		<li>
                <div class="data-sj-content">
                	<div class="data-sj-content-head">4#水位</div>
                	<div class="data-sj-content-cycle-num"><em>6.714</em>m</div>
                </div>
            </li>
        	</div>
            <div class="swiper-slide">
        		<li>
                <div class="data-sj-content">
                	<div class="data-sj-content-head">5#水位</div>
                	<div class="data-sj-content-cycle-num"><em>6.714</em>m</div>
                </div>
            </li>
        	</div>
           <div class="swiper-slide">
        		<li>
                <div class="data-sj-content">
                	<div class="data-sj-content-head">6#水位</div>
                	<div class="data-sj-content-cycle-num"><em>6.714</em>m</div>
                </div>
            </li>
        	</div>
        	<div class="swiper-slide">
        		<li>
                <div class="data-sj-content">
                	<div class="data-sj-content-head">7#水位</div>
                	<div class="data-sj-content-cycle-num"><em>6.714</em>m</div>
                </div>
            </li>
        	</div>
        	<div class="swiper-slide">
        		<li>
                <div class="data-sj-content">
                	<div class="data-sj-content-head">8#水位</div>
                	<div class="data-sj-content-cycle-num"><em>6.714</em>m</div>
                </div>
            </li>
        	</div>
        	<div class="swiper-slide">
        		<li>
                <div class="data-sj-content">
                	<div class="data-sj-content-head">9#水位</div>
                	<div class="data-sj-content-cycle-num"><em>6.714</em>m</div>
                </div>
            </li>
        	</div>
        	<div class="swiper-slide">
        		<li>
                <div class="data-sj-content">
                	<div class="data-sj-content-head">10#水位</div>
                	<div class="data-sj-content-cycle-num"><em>6.714</em>m</div>
                </div>
            </li>
        	</div>
        	<div class="swiper-slide">
        		<li>
                <div class="data-sj-content">
                	<div class="data-sj-content-head">11#水位</div>
                	<div class="data-sj-content-cycle-num"><em>6.714</em>m</div>
                </div>
            </li>
        	</div>
        	<div class="swiper-slide">
        		<li>
                <div class="data-sj-content">
                	<div class="data-sj-content-head">12#水位</div>
                	<div class="data-sj-content-cycle-num"><em>6.714</em>m</div>
                </div>
            </li>
        	</div>
            <!--<li>
            <!--<li>
                <div class="data-sj-content">
                    <div class="data-sj-content-in">
                        <div class="data-sj-content-title">SAFE</div>
                        <div class="data-sj-content-cycle">
                            <div class="data-sj-content-cycle1">
                                <div class="data-sj-content-cycle2">
                                    <div class="data-sj-content-cycle-data">3井</div>
                                </div>
                            </div>
                        </div>

                        <div class="data-sj-content-input"></div>
                    </div>

                </div>
            </li>
            <li>
                <div class="data-sj-content">
                    <div class="data-sj-content-in">
                        <div class="data-sj-content-title">SAFE</div>
                        <div class="data-sj-content-cycle">
                            <div class="data-sj-content-cycle1">
                                <div class="data-sj-content-cycle2">
                                    <div class="data-sj-content-cycle-data">4井</div>
                                </div>
                            </div>
                        </div>

                        <div class="data-sj-content-input"></div>
                    </div>

                </div>
            </li>-->
        </ul>
		</div>
    </div>
        </div>
        <div class="clear"></div>
        
    </div>
<script>        
  var mySwiper = new Swiper ('.swiper-container', {
  	slidesPerView:4,
  	/*spaceBetween:20,*/
  	autoplay:false,//支持自动播放
    direction: 'horizontal',
    speed:1000,
    loop: true,
  });      
  </script>
</body>
 <script type="text/javascript" src="../js/business/index.js"></script>
</html>